<!--
  Generated template for the WebcastFavoriteListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="goBack()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            收藏夹
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>

</ion-header>


<ion-content (ionScroll)="scrolling()" (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollEnd($event)">
    <ion-refresher (ionRefresh)="pullDownRefresh($event)" [pullMax]="800">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <div class="favorite-head">
        <div class="favorite-num">
            共有{{castFavNum}}个结果
        </div>
    </div>

    <div *ngIf="(!castFavList || castFavList.length === 0) && isLoaded" class="no-data">
        <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
        <div class="no-data-txt">没有相关数据</div>
    </div>

    <ion-list [virtualScroll]="castFavList" [approxItemHeight]="'65px'">

        <ion-item *virtualItem="let data" (click)="goCastDetail(data.id, data.castTitle, data.castId)">
            <div class="wc-item">
                <div class="wc-item-img">
                    <!--<img *ngIf="data.castStatus != 0" src="./assets/images/webcast/icon_paly.png" />-->
                    <div class="wc-item-img-bottom">
                        <img src="{{ data.castImageUrl?data.castImageUrl:'./assets/images/webcast/live_default.png' }}">
                    </div>

                    <div *ngIf="data.castStatus == 5" class="wc-item-img-top">
                        <img src="./assets/images/webcast/icon_paly.png">
                    </div>
                </div>

                <div class="wc-item-text">
                    <div class="item-content">
                        <span class="title-text">{{formatCastTitle(data.castTitle)}}</span>
                        <button *ngIf="data.castStatus == 1" ion-button class="text-date-info">{{data.castText}}</button>
                        <button *ngIf="data.castStatus == 2" ion-button class="text-date-warn">{{data.castText}}</button>
                        <span *ngIf="data.castStatus == 5" class="text-date-text">{{data.castText}}</span>
                    </div>
                </div>
            </div>
        </ion-item>

        <!--<ion-item>-->
            <!--<div class="wc-item">-->
                <!--<div class="wc-item-img">-->
                    <!--<img src="./assets/images/webcast/icon_paly.png" />-->
                <!--</div>-->

                <!--<div class="wc-item-text">-->
                    <!--<div class="text-title">-->
                        <!--<span>[培训]资深保险员分享活动第108期</span>-->
                    <!--</div>-->
                    <!--<div class="text-date">-->
                        <!--<button ion-button class="text-date-warn">明天9:00</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</ion-item>-->

        <!--<ion-item>-->
            <!--<div class="wc-item">-->
                <!--<div class="wc-item-img">-->
                    <!--<img src="./assets/images/webcast/icon_paly.png" />-->
                <!--</div>-->

                <!--<div class="wc-item-text">-->
                    <!--<div class="text-title">-->
                        <!--<span>[培训]资深保险员分享活动第108期</span>-->
                    <!--</div>-->
                    <!--<div class="text-date">-->
                        <!--<button ion-button class="text-date-info">正在直播</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</ion-item>-->

        <!--<ion-item>-->
            <!--<div class="wc-item">-->
                <!--<div class="wc-item-img">-->
                    <!--<img src="./assets/images/webcast/icon_paly.png" />-->
                <!--</div>-->

                <!--<div class="wc-item-text">-->
                    <!--<div class="text-title">-->
                        <!--<span>[培训]资深保险员分享活动第108期</span>-->
                    <!--</div>-->
                    <!--<div class="text-date">-->
                        <!--<span class="text-date-text">2018/03/08</span>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

        <!--</ion-item>-->

    </ion-list>

    <div class="is-arrival-bottom" [ngClass]="{'bottom':isArriveBottom}">
    到底了
</div>

    <ion-fab bottom right *ngIf="castFavList && castFavList.length > 0" class="go-up">
        <button ion-fab (click)="goUp()" color="light">
            <img class="go-up-icon" src="./assets/images/client/client-list/icon_top.png" alt="">
        </button>
    </ion-fab>

</ion-content>
